<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__BOOTSTRAP__/css/bootstrap.min.css" title=""/>
    <link rel="stylesheet" type="text/css" href="__CSS__/style.css" title=""/>
    <link type="text/css" href="__CSS__/video/style.css" rel="stylesheet">
    <link type="text/css" href="__CSS__/video/index.min.css?v=1" rel="stylesheet">
    <link type="text/css" href="__CSS__/video/cropper.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layer/skin/default/layer.css?v=3.0.3303" title="" id="layuicss-skinlayercss">
    <title>管理控制台</title>
</head>
<body data-api="{$service_api.'/video'}"
      data-service-api="{$service_api}"
      data-cdn-url="http://cd.hzwltb69.com/"
      data-wid="164" data-role-name="hu" data-module="video/">
<div class="container-fluid">
    <div class="info-center">
        <div class="page-header">
            <div class="pull-left">
                <h4>{$title}</h4>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="app">
            <div class="vu-body">
                <div class="el-row">
                    <div class="el-col el-col-8">
                        <form class="el-form">
                            <div class="el-form-item is-required el-form-item--small">
                                <label class="el-form-item__label" style="width: 105px;">视频标题</label>
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <div class="el-input el-input--small">
                                        <input type="text" v-model="model.video_title" autocomplete="off" placeholder="视频名称为1~40个字符" maxlength="40" class="el-input__inner">
                                        <span class="el-input__suffix">
                                            <span class="el-input__suffix-inner">
                                                <span class="el-input__count">
                                                    <span class="el-input__count-inner">0/40</span>
                                                </span>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item el-form-item--small">
                                <label class="el-form-item__label" style="width: 105px;">视频封面</label>
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <vu-cropper v-model="model.video_logo" :cropper-size="cropperSize"
                                                width="300px" height="500px"></vu-cropper>
                                    <vu-notice>图片建议格式为JPG/PNG，尺寸750x420;默认封面视频第一帧</vu-notice>
                                </div>
                            </div>
                            <div class="el-form-item is-required el-form-item--small">
                                <label class="el-form-item__label" style="width: 105px;">视频上传</label>
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <vu-media v-model="videoInfo" width="400px"></vu-media>
                                    <vu-notice type="danger" @click="download"><i class="el-icon-download"></i>视频压缩帮助（兼容苹果、安卓）,仅支持.mp4格式
                                    </vu-notice>
                                </div>
                            </div>
                            <div class="el-form-item el-form-item--small" style="width: 300px;">
                                <label class="el-form-item__label" style="width: 105px;">排序值</label>
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <div class="el-input el-input--small">
                                        <input type="text" v-model="model.video_sort"  autocomplete="off" class="el-input__inner">
                                    </div>
                                    <p class="vu-notice vu-notice-comment">值越大越靠前,会在商学院显示</p>
                                </div>
                            </div>
                            <div class="el-form-item el-form-item--small" style="width: 300px;">
                                <label class="el-form-item__label" style="width: 105px;">是否启用</label>
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <div class="el-input el-input--small">
                                        <label>
                                            <input class="xb-icheck" v-model="model.status" type="radio" name="status" value="1">
                                            <span class="pull-right">&nbsp;启用&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        </label>
                                        <label>
                                            <input class="xb-icheck" v-model="model.status" type="radio" name="status" value="0">
                                            <span class="pull-right">&nbsp;禁用&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="el-form-item el-form-item--small">
                                <div class="el-form-item__content" style="margin-left: 105px;">
                                    <button type="button" class="el-button el-button--primary el-button--small" @click="submit()">
                                        <span>保存</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="__JS__/video/importJs.js"></script>
        <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>
        <script type="text/javascript" src="__JS__/video/aliyun-oss-sdk.min.js"></script>
        <script type="text/javascript">
            let vm = new Vue({
                el: '#app',
                data: {
                    model: {
                        id: 0,
                        video_title: '',
                        video_logo: '', //封面图
                        video_url: '', //文件
                        product_id: 0, //商品ID
                        video_sort: 0,
                        status: 1
                    },
                    cropperSize: {width: 300, height: 500},
                    videoInfo: {
                        url: "",
                        type: "",
                        duration: ''
                    },
                    saving: false,
                },
                created: function () {
                    this.model.id = this.getParam('id');
                    this.$nextTick(function () {
                        this.queryInfo()
                    })
                },
                methods: {
                    //校验数据
                    validate: function() {
                        let valid = true;
                        if (this.model.video_title.length < 1 || this.model.video_title.length > 40) {
                            this.$message.error('视频标题为1~40个字符');
                            return !valid;
                        }

                        if (!this.model.video_url) {
                            this.$message.error('请上传视频文件');
                            return !valid;
                        }

                        return valid;
                    },
                    submit: function() {
                        this.model.video_url = this.videoInfo.url;

                        if (!this.validate()) {
                            return;
                        }

                        this.saving = true;

                        let postData = JSON.parse(JSON.stringify(this.model));
                        if (!this.model.video_logo && this.videoInfo.type === 'video') {
                            let file_path = this.videoInfo.url.split('?')[0];
                            console.log(file_path);
                            postData['video_logo'] = file_path + '?x-oss-process=video/snapshot,t_0';
                        }
                        let videoData = JSON.parse(JSON.stringify(this.videoInfo));
                        delete videoData.url;
                        postData['video_info'] = JSON.stringify(videoData);

                        axios.post('/saveVideo', postData).then(function(r){
                            this.saving = false;
                            const {data} = r;
                            if(data.code != 200){
                                this.isPost = false;
                                return layer.msg(data.msg);
                            }
                            layer.msg(data.msg);
                            setTimeout(function(){
                                location.href = 'index.html';
                            }, 1000);
                        });
                    },
                    queryInfo: function() {
                        if (this.model.id > 0) {
                            var that = this;
                            axios.post('/getVideo', {
                                id: this.model.id
                            }).then(function(r) {
                                const {data} = r;
                                console.log(data);
                                if(data.code == 200){
                                    that.model.id = data.data.video.id;
                                    that.model.video_title = data.data.video.videoTitle;
                                    that.model.video_logo = data.data.video.videoLogo;
                                    that.model.video_url = data.data.video.videoUrl;
                                    that.model.video_sort = data.data.video.videoSort;
                                    that.model.status = data.data.video.status;
                                    that.videoInfo = data.data.videoInfo;
                                    that.videoInfo.url = data.data.video.videoUrl;
                                }else{
                                    layer.msg(data.msg);
                                }
                            })
                        }
                    },
                    download: function() {
                        window.open('https://images.to-ok.com.cn/document/%E8%A7%86%E9%A2%91%E6%A0%BC%E5%BC%8F%E8%BD%AC%E6%8D%A2%E6%95%99%E7%A8%8B.rar');
                    }
                }
            });
        </script>
    </div>
</div>
</body>
</html>